<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帖子详情</title>
    <link rel="shortcut icon" href="#"/>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<!--    <link rel="stylesheet" href="../2-post/layui/layui.css">-->
    <link rel="stylesheet" type="text/css" href="css/carbase.css"/>
    <style>
        .head {
            line-height: 20px;
            height: 20px;
            cursor: pointer;
            margin-top: 20px;
        }

        .title {
            margin-top: 20px;
            margin-left: 200px;
            text-align: center;
        }

        .wirter {
            padding-left: 500px;
            margin: 30px 0px 10px 0px;
        }

        .post {
            text-align: center;
            width: 90%;
            margin: auto;
            letter-spacing: 2px;
        }

        .Comment {
            margin-top: 40px;
            width: 90%;
            margin: auto;
            /*padding-left: 20px;*/
        }

        .showComment {
            margin-top: 40px;
            width: 90%;
            margin: auto;
        }

        li {
            list-style-type: none;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .view_info {
            width: 100%;
            position: relative;
            left: 0;
            bottom: 85px;
            z-index: 15;
        }

        .vi_con {
            width: 830px;
            padding: 0 0 10px 70px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }

        h2 {
            width: 710px;
            margin-bottom: 0px;
            white-space: nowrap;
            overflow-wrap: normal;
        }

        .commentModule {
            display: none;
        }
    </style>
</head>
<body>
<div class="" style="width: 90%;margin-top: 10px;margin: 0 auto">
    <div class="head">
        <a href="" style="color: #444444;">返回论坛</a>
    </div>

    <div class="title">
        <div style="margin: 0 auto">
            <h2 id="PN" style="margin-left: 70px"></h2>
        </div>
        <div id="button1">
            <!--是否关注-->
        </div>

        <div class="view_info">
            <div class="vi_con">
            </div>
        </div>
        <div class="wirter">
            <!--<a href='../4_user/简单的考试类个人中心页面模板_files/index1.html?userName='" + + " style='color: #333333;></a>-->
            <span class="author"></span>
            <!--关注作者,作者主页关注，不在帖子页面关注-->
            <!--<input type="button" class="btn btn-default btn-sm FocusAuthor" style="display: inline" onclick="FA()" value="关注作者">-->
            <span class="date" style="padding-right: 15px;padding-left: 15px"></span>
        </div>
    </div>
    <div class="post" style="white-space:pre"></div>
    <hr style="background-color:#b2b2b2;height: 1px;width:90%;border: none;"/>
    <div class="Comment">


        <h3 style="padding-bottom: 20px">评论区</h3>
        <div class="addcomment" style="padding-bottom: 10px;padding-left: 400px" >
            <!--添加评论-->
            <input type="text" class="form-control" id="commentText" style="width: 400px;display: inline;" placeholder='写下您的评论吧'>
            <input type="button" class="btn btn-default btn-sm addcomment" id="addcomment" style="display: inline" value="提交">

        </div >
        <div class="showComment">


        </div>
    </div>
</div>
<script type="text/javascript" src="../jquery/jquery-3.4.1.js"></script>
<script>
    //循环中的相同操作用this关键字来实现会很方便


    var author;
    //获取文章内容
    var postId = window.location.href.split("?")[1].split("=")[1];
    var a;
    function getPost() {
        $.ajax({
            type: 'get',
            url: '/forum/post/selectByPostId',
            dataType: 'json',
             data: "postId=" + postId,
            //data: "postId=1",
            success: function (data) {
                console.log(data);
                // $('#photo').append("<img src='" + data.postPhoto + "'>");
                $('#PN').append(data.postName);
            /*<a href='../4_user/简单的考试类个人中心页面模板_files/index1.html?userName='" + + " style='color: #333333;></a>*/
                // console.log(data.userName);
                a = "<a href='../4_user/personself/index1.html?userName=" + data.userName + "'style='"+"color: #333333;'>"+data.userName+"</a>"
                console.log(a)
                $('.author').append(a);
                $('.date').append(data.other2);
                $('.post').append(data.postContent);
                // author = data.userName;
            }
        })
    }

    //var commentId;
    //暂时写死
    //var currentUserId = "003";
    var currentUserId;
    var currentUserName;
    var currentCommentId;
    //控制删除按钮的出现，只有当前评论/回复主人id和后端传来的session中的用户id相同时才显示删除按钮
    //获取当前用户id只需要一次，后面来对比就完了
    function getUserId() {
        $.ajax({
            type: 'get',
            url: '/forum/user/getUserInfo',
            dataType: 'json',
            success: function (data) {
                currentUserId = data.data.userId;
                currentUserName = data.data.userName;
            }
        })
    }
    getUserId();

    function showCommentAndResponse() {
        var that = this;
        $.ajax({
            type: 'get',
            url: '/forum/comment/findByPostId',
            dataType: 'json',
            data: "postId=" + postId,
            success: function (data) {
                console.log("postId是" + postId);
                var html = '';
                //var comment = data.data;
                for (var i = 0; i < data.data.length; i++) {

                    that.commentId = data.data[i].comment_id;
                    currentCommentId = data.data[i].comment_id;

                   html += "<div class='userarea'><div class='usercritic'>";
                   html += "<img src= " + data.data[i].comment_user_img + " >";
                    //html += "<img src='images/2.jpg'>";//暂时用默认图片
                   html += "<a href='../4_user/简单的考试类个人中心页面模板_files/index1.html?userName='" + data.data[i].comment_user_name + " style='color: #333333;' class='getusername'><label>" + data.data[i].comment_user_name + "</label></a>";
                   html += "<div class='critictime' style='display: inline'>"
                       + data.data[i].comment_create_time + "</div>";

                    html += "<input class='currentCommentId' style='display: none' value='"+ data.data[i].comment_id +"'>";
                    html += "<input class='btn btn-default btn-sm recomment' type='button' style='float: right' value='回复'>"
                    html += "<div class='commentModule'><input type='text' class='form-control' class='comment2' placeholder='写下您的评论吧'>"; //id只能有一个，但是class可以有多个
                    html += "<input type='button' class='btn btn-default btn-sm refer' style='float: right' value='提交'></div>"//onclick='AR()'
                    if (that.currentUserId == data.data[i].comment_user_id) {
                        var a = data.data[i].comment_id;
                        html = html + "<input type='button' class='btn btn-default btn-sm C' onclick='sureDC(\"" + data.data[i].comment_id + "\")' style='float: right' value='删除评论'></div>"
                    } else {
                        html = html + "</div>";
                    }

                   html += "<div class='critictext'>" + data.data[i].comment_content + "</div></div>"





                    if (data.data[i].comment_responses == null) {
                    } else {

                        for (var j = 0; j < data.data[i].comment_responses.length; j++) {

                            html += "<div class='userarea2'><div class='usercritic2'>";
                            html += "<img src= " + data.data[i].comment_responses[j].comment_user_img + " >";
                            //html += "<img src='images/1.jpg'>";
                            html += "<a href='../4_user/简单的考试类个人中心页面模板_files/index1.html?userName='" + data.data[i].comment_responses[j].response_user_name + " style='color: #333333;' class='getusername'><label>" + data.data[i].comment_responses[j].response_user_name + "</label></a>";
                            html += "<div class='critictime2' style='display: inline'>"
                                + data.data[i].comment_responses[j].response_create_time + "</div>";
                            if (that.currentUserId == data.data[i].comment_responses[j].response_user_id) {
                                html += "<input type='button' class='btn btn-default btn-sm R'style='float: right' id='deleteResponse' " +
                                    "onclick='sureDR(\"" + data.data[i].comment_id + "\",\"" + data.data[i].comment_responses[j].id + "\")' value='删除回复'></div>"
                            } else {
                                html = html + "</div>";
                            }
                            html += "<div class='critictext2'>" + data.data[i].comment_responses[j].response_content + "</div></div>"
                            //删除回复按钮

                        }

                    }


                }
                //通过循环展示所有评论以及评论的回复,还需要拼接到comment的div来显示

                $('.showComment').append(html);

                //获取当前点击用户姓名并携带此信息跳转至用户详情界面
                /*$('.getusername').click(function() {
                    var username = $(this).children().text();
                    console.log(username);
                    sessionStorage.setItem("username",username );
                })*/

                //控制显示(已成功)
                $('.recomment').click(function () {
                    //相对recomment来找寻元素
                    $(this).next().show(); //显示（相对下一个）这里的this可以成功执行
                    $(this).hide(); //隐藏（他自己）
                })


                $('.refer').click(function () {    //添加回复
                    //currentCommentId是父元素前一个的前一个
                    var currentCommentId = $(this).parent().prev().prev().val();
                    console.log(currentCommentId);
                    $.ajax({
                            type:'post',
                            url: '/forum/comment/addResponse',
                            dataType: 'json',
                            data:{
                                comment_id:currentCommentId,
                                responseText:$(this).prev().val(),
                                userName:currentUserName
                            },
                            success:function (data) {
                                location.reload();
                            }
                        }
                    )
                    $(this).parent().prev().show();
                    $(this).parent().hide();
                })

                var that1 = that;
            }
        })
    }


    $('#addcomment').click(function () {    //添加评论
        var comment = $('#commentText').val();
        //var commentText = "commentText=" + comment;
        //console.log("我能输出" + currentUserName)
        $.ajax({
            type: 'get',
            url: '/forum/comment/insertComment',
            dataType: 'json',
            //data: commentText,
            data: {
                commentText:comment,
                postId:postId,
                userName:currentUserName
            },
            success: function (data) {

            }
        })
        location.reload();
    })


    //调用
    getPost();
    showCommentAndResponse();

    function sureDC(a) {
        var msg = "确认删除评论？"
        if(confirm(msg) == true){
            DC(a);
            return true;
        }else{}
    }

    function DC(a) {      //删除评论
        var comment_id = "comment_id=" + a;
        $.ajax({
            type: 'get',
            url: '/forum/comment/deleteComment',
            dataType: 'json',
            data: comment_id,
            success: function (data) {
                if (data.msg == "删除成功") {
                    location.reload();
                } else {
                    alert("删除评论失败")
                }
            }
        })
    }


    function sureDR(a,b) {
        var msg = "确认删除回复？"
        if(confirm(msg) == true){
            DR(a,b);
            return true;
        }else{}
    }
    function DR(a,b){     //删除回复
        $.ajax({
            type: 'get',
            url: '/forum/comment/deleteResponse',
            dataType: 'json',
            data: {
                comment_id:a,
                response_id:b
            },
            success: function (data) {
                if (data.msg == "删除回复成功") {
                   console.log(data)
                    location.reload();
                } else {
                    alert("删除评论失败")
                }
            }
        })
    }

    /*//作者关注按钮（写法参照下列关注文章按钮以及点击事件）
    function FA() {
        var userByName = $(this).prev().text();
        var userName = author;
        alert("准备关注作者");
        $.ajax({
            type: 'get',
            url: '/forum/concern/insertConcern',//insertConcern是关注文章
            dataType: 'json',
            data: {
                userByName:userByName,
                userName:userName
            },
            success: function (data) {
                if (data == "success") {
                    alert("关注作者成功")
                } else {

                }
            }
        })
    }*/

    //文章关注按钮
    var html2 = "<button type='button' class='btn btn-default btn-sm' onclick='btnn(1)'>关注</button>\n";
    var html3 = "<button type='button' class='btn btn-info btn-sm' onclick='btnn(2)'>已关注</button>";
    // 获取登录用户的信息
    $.ajax({
        url: "/forum/user/getUserInfo",
        dataType:'json',
        success:function (data) {
            if (data.state === '200' ) {
                var userName = data.data.userName;
                console.log(postId);
                console.log(userName);
                currentUserName = userName;
                var info = "postId=" + postId + "&userName=" + userName;
                // alert(info)

                // 判断是否已经关注过该帖子
                $.ajax({
                    url:"/forum/praise/selectPostByPostIdAndUserName",
                    data:info,
                    type:"post",
                    success:function (result) {
                        // alert(result)
                        if (result == "yes"){
                            $('#button1').html(html2);
                        }else if (result == "no") {
                            $('#button1').html(html3);
                        }
                    }
                })
            }
        }
    })


    //关注文章按钮的点击事件
    // console.log(postId);
    function btnn(number) {
        $.ajax({
            url: "/forum/user/getUserInfo",
            dataType:'json',
            success:function (data) {
                if (data.state === '200') {
                    var userName = data.data.userName;
                    console.log(postId);
                    console.log(userName);
                    var info = "postId=" + postId + "&userName=" + userName;
                    console.log(postId, userName, number)
                    if (number == 1) {
                        $.ajax({
                            url: "/forum/praise/insertPraise",
                            data: info,
                            type: "post",
                            // dataType:"json",
                            success: function (data) {
                                alert(data)
                                if (data == "success") {
                                    $('#button1').html(html3);
                                } else {
                                    alert("关注失败,请重试")
                                }
                            }
                        })
                    } else if (number == 2) {
                        $.ajax({
                            url: "/forum/praise/deletePraiseByOther1",
                            data: info,
                            type: "post",
                            success: function (data) {
                                alert(data)
                                if (data == "success") {
                                    $('#button1').html(html2);
                                } else {
                                    alert("取消关注失败,请重试")
                                }
                            }
                        })
                    }
                }
            }
        })
    }

</script>
</body>
</html>
